<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/nflag.css"/>
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>经济日历</title>
    <style>
        body {
            background-color: white;
        }

        .index-calendar-center {
            padding: 0.24rem 0.32rem;
        }

        .index-calendar-center-total {
            color: rgba(34, 34, 34, 0.45);
        }

        .index-calendar-center-total span {
            color: #2C68FF;
        }

        .index-calendar-center-screen {
            color: rgba(34, 34, 34, 0.45);
            margin-right: 0.08rem;
        }

        .index-calendar-center-screen-icon {
            color: #000000;
        }

        .index-calendar-list-item {
            border-top: 0.02rem solid #F7F7F7;
            padding: 0.26rem 0.32rem;
        }

        .index-calendar-list-country {
            color: rgba(34, 34, 34, 0.45);
            margin-left: 0.16rem;
        }

        .index-calendar-list-time {
            color: rgba(34, 34, 34, 0.45)
        }

        .index-calendar-list-title {
            line-height: 0.42rem;
        }

        .index-calendar-list-label {
            color: rgba(34, 34, 34, 0.45)
        }

        .index-calendar-list-icon-n {
            color: #E2E2E2;
        }

        .index-calendar-list-icon-r {
            color: #EF4244;
        }

        .index-calendar-list-icon-g {
            color: #2C68FF;
        }

        .index-calendar-ny {
            color: rgba(34, 34, 34, 0.7);
        }

        .index-calendar-nyr {
            color: rgba(34, 34, 34, 0.45);
        }
        .index-calendar-nyr-active{
            color:#2C68FF;
        }

        .index-calendar-icon {
            color: #000000;
        }

        .index-calendar-line {
            height: 0.88rem;
            background-color: #F7F7F7;
        }


        .index-calendar-day {
            width: 0.8rem;
        }

        .index-calendar-day-w {
            color: rgba(34, 34, 34, 0.45)
        }

        .index-calendar-day-d {
            color: #222222;
        }

        .index-calendar-day-active {
            background: #EF4244;
            border-radius: 0.04rem;
            height:0.88rem;
        }

        .index-calendar-day-w-active {
            color: #FFFFFF;
        }

        .index-calendar-day-d-active-now {
            /* color: #2C68FF; */
        }

        .index-calendar-day-d-active {
            color: #FFFFFF;
        }




        .index-info-cal-pop {
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 100rem;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 10000;
        }

        .index-info-cal-wrap {
            position: fixed;
            bottom: 0;
            background-color: white;
            width: 100%;
            z-index: 10002;
            padding-top: 0.34rem;
        }

        .index-info-cal-content {
            padding: 0 0.06rem 0 0.32rem;
        }

        .index-info-cal-item {
            margin-right: 0.26rem;
            width: 1.52rem;
            height: 0.64rem;
            line-height: 0.64rem;
            background-color: #F7F7F7;
            color: #191919;
            text-align: center;
            border-radius: 0.04rem;
        }

        .index-info-cal-item-active {
            background-color: #2C68FF;
            color: #FFFFFF;
        }

        .index-info-cal-sure {
            background-color: #2C68FF;
            color: #FFFFFF;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            margin-top: 0.32rem;
        }


    </style>
</head>
<body>

<div class="flex-column ff400 fs14 h-100-p">
    <!-- <div class="placeholder-top" style="height: 0!important;"> -->
        <!--状态栏-->
        <!-- <div class="bg-main status-bar" style="height: 0!important;"></div> -->
        <!--导航栏-->
        <!-- <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">全球经济日历</div>
            <div class="right-bar">
            </div>
        </div> -->
    <!-- </div> -->

    <div class="pd1620">
        <div class="flex-row justify-content-between fs16">
            <div class="index-calendar-ny"></div>
            <div class="flex-row index-calendar-nyr align-items-center">
                <div class="index-calendar-nyr mr20" onclick="calendarChange(1,this)">今</div>
                <div class="index-calendar-nyr mr20" onclick="calendarChange(2,this)">月</div>
                <div class="index-calendar-nyr index-calendar-nyr-active mr20" onclick="calendarChange(3,this)">日</div>
                <div onclick="selectCalendar()"><span class="index-calendar-icon iconfont iconrili-01"></span></div>
            </div>
        </div>
    </div>
    <div class="index-calendar-line flex-row  align-items-center scoll-x">
        <div class="index-calendar-date flex-row pl20 pr20 mescroll-touch-x"></div>
    </div>

    <div class="index-calendar-center flex-row fs13 justify-content-between">
        <div class="index-calendar-center-total">共<span></span>条数据</div>
        <div class="flex-row" onclick="calendarShow()">
            <div class="index-calendar-center-screen">筛选</div>
            <div><span class="index-calendar-center-screen-icon iconfont iconshaixuan fs14"></span></div>
        </div>
    </div>


    <!--经济日历列表-->
    <div class="mescroll flex-1" id="mescroll">
        <div class="index-calendar-list-wrap"></div>
    </div>

    <div class="index-info-cal-pop index-info-cal-show" style="display: none" onclick="calendarCancle()"></div>
    <div class="index-info-cal-wrap index-info-cal-show" style="display: none">
        <div class="flex-column fs14 index-info-cal-content">
            <div class="ff600 mb20 c-222">国家</div>
            <div class="index-info-cal-box flex-row flex-wrap">
            </div>
        </div>
        <div class="index-info-cal-sure fs16" onclick="calendarSure()">确定</div>
    </div>
</div>

</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../js/calendar.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let pm = {
    isScroll: false,
    pageSize: 10,
    pageNum: 1,  //当前页
    pageTotal: 0,  //总页数
    totalNum: 0, //总条数
    currDate: DateUtils.date2Dt(new Date()),
    month:'',
    scrollLeft: 0
  }
  function initPage(params){
    Utils.sbhAdaptive()
    asemblyChildMenu()
    initCalendar()
    //pageScroll(dealCalendar)
    //设置深色模式
    if(configColorType === '1'){
        bridgeUtils.loadCss('../../css/theme/default/skin.css')
    }else{
        bridgeUtils.loadCss('../../css/theme/white/skin.css')
    }

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: downCallback, //下拉刷新入口
      upCallback: dealCalendar //滚动加载入口
    })
  }

  function reLoadPage(){
    downCallback()
  }

  function downCallback() {
    $('.index-calendar-list-wrap').html('')
    asemblyChildMenu()

    dealCalendar()
  }

  function asemblyChildMenu(){
    pm[fCodeCal] = {}
    pm[fCodeCal][fCodeCal] = {
      pageNum: 1,
      pageSize: 10,
      isScroll: false,//初始化滚动状态
      lastDttm: pm.currDttm,
      scrollHeight: 0,
      parentCode: 1,
      funcCode: 1,
      timeStamp: '', // 快讯专用
    }
  }

  // 当点击经济日历
  function dealCalendar(fCode) {
    fCode = fCodeCal
    Server.indexCalendar.selectNewsCalendarList({//财经数据列表
      type: '财经数据',
      calendarDate: currDateCal,
      stateAbbrStr: calendarAbbr,
      sortInfo: 0,
      month: calendarMonth,
      pageNum: pm[fCode][fCode].pageNum,
      pageSize: pm[fCode][fCode].pageSize  //目前查询200条
    }).then(function success(res) {
      let htmlStr = ''
      $.each(res.specialInfo, function (i, item) {
        let flag = 0
        //比预期高是红色，比预期低是绿色
        //和预期同数，颜色和预期色一样；预期无，和前值一个色
        if (Utils.notEmpty(item.presentValue) && Utils.notEmpty(item.expectedValue)
          && parseFloat(Utils.retainData(item.presentValue)) > parseFloat(Utils.retainData(item.expectedValue))) {
          //比预期高是红色
          flag = 1
        } else if (Utils.notEmpty(item.presentValue) && Utils.notEmpty(item.expectedValue)
          && parseFloat(Utils.retainData(item.presentValue)) < parseFloat(Utils.retainData(item.expectedValue))) {
          //比预期低是绿色
          flag = -1
        }
        htmlStr += '<div>'
        htmlStr += '<div class=\'index-calendar-list-item flex-column\'>'
        htmlStr += '<div class=\'flex-row justify-content-between align-items-center\'>'
        htmlStr += '<div class=\'flex-row align-items-center\'>'
        htmlStr += '<div class=\'national-flag national-flag-' + item.stateAbbr.toLowerCase() + '\'></div>'
        htmlStr += '<div class=\'index-calendar-list-country fs13\'>' + item.countryChName + '</div>'
        htmlStr += '<div class=\'index-calendar-list-time fs13 ml20\'>' + item.calendarTime + '</div>'
        htmlStr += ' </div>'

        htmlStr += '<div class=\'flex-row\'>'
        for (let m = 1; m <= 3; m++) {
          if (m <= item.importance) {
            if (item.importance === '1') {
              htmlStr += '<span class=\'iconfont iconshoucang fs14 ml4 index-calendar-list-icon-n\' style=\'color:#2C68FF;\'></span>'
            } else {
              htmlStr += '<span class=\'iconfont iconshoucang fs14 ml4 index-calendar-list-icon-n\' style=\'color:#EF4244;\'></span>'
            }
          } else {
            htmlStr += '<span class=\'iconfont iconshoucang fs14 ml4 index-calendar-list-icon-n\'></span>'
          }
        }
        htmlStr += '</div>'
        htmlStr += ' </div>'
        htmlStr += ' <div class=\'index-calendar-list-title fs15 ff600 mt10\'>' + ( item.calendarIndexNew ? item.calendarIndexNew : item.calendarIndex ) + '</div>'
        htmlStr += ' <div class=\'index-calendar-list-label flex-row mt10 align-items-center fs12\'>'
        htmlStr += ' <div style=\'width:0.6rem;\'>今值</div>'
        htmlStr += '<div class="line1 ff500" style=\'width:1.2rem;margin-right: 0.1rem; ' + (flag > 0 ? 'color:#EC3E33' : flag < 0 ? 'color:#00AE1F' : '') + '\'>' + (item.presentValue ? item.presentValue : '-') + '</div>'
        htmlStr += '<div style=\'width:0.6rem;\'>预期</div>'
        htmlStr += '<div class="line1 ff500" style=\'width:1.2rem;margin-right: 0.1rem\'>' + (item.expectedValue ? item.expectedValue : '-') + '</div>'
        htmlStr += '<div  style=\'width:0.6rem;\'>前值</div>'
        htmlStr += '<div class="line1 ff500" style=\'width:1.2rem;\'>' + (item.precedingValue ? item.precedingValue : '-') + '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'

      })

      //如果数据条数相等，则表示可能还存在数据，还需翻页
      if (pm[fCode][fCode].pageNum === 1) {
        $('.index-calendar-list-wrap').html(htmlStr)
      } else {
        $('.index-calendar-list-wrap').append(htmlStr)
      }
      $('.index-calendar-center-total span').html(res.total)

      pm[fCode][fCode].pageNum ++
      meScroll.endSuccess(res.specialInfo.length, res.specialInfo.length === pm[fCode][fCode].pageSize)
    }).catch((error) => {
      jsBridge.log(error)
      meScroll.endErr()
    })
  }


</script>
</html>
